<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播</title>
    <style>
        body{
            margin: 0;
            padding: 0;
        }
        #slider{
            /* view */
            width: 600px;
            height: 500px;
            margin: 0 auto;
            border: 1px solid #56a5f1;
            position: relative;
            overflow: hidden;
        }
        .item{
            display: block;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            transform: left 0.7s ease-in-out;
        }
        #div {
            font-size: 40px;
        }
        /* 小圆点的统一样式 */
        .page-control{
            width: 10px;
            height: 10px;
            border: 1px solid #fff;
            border-radius: 50%;
            position: absolute;
            bottom: 20px;
            cursor: pointer;
        }
         /* 小箭头的统一样式 */
        .arrow{
            width: 50px;
            height: 50px;
            background-color: rgba(255, 255, 255, 0.2);
            position: absolute;
            top: 225px;
            z-index: 10;
            border-radius: 50%;
            cursor: pointer;
            background-image: url('./image/3.png');
            background-position: -5px center;
        }
        .right-arrow{
            right: 0;
            background-position: 55px center;
        }
    </style>
</head>
<body>
    <div id="slider">
        <img class="item" src="./image/111.jpg">
        <img class="item" src="./image/222.jpg">
        <img class="item" src="./image/333.jpg">
        <img class="item" src="./image/444.jpg">
        <img class="item" src="./image/111.jpg">
    </div>
    <!-- <div id="div">777</div> -->
    <script>
        /* let slider=document.getElementById('slider'); */
        /* div.style.fontSize='60px';
        div.style.color='red'; */
        /* div.style.cssText='font-size:77px;color:red;font-weight:900'; */
        //获取父容器的宽度
        let sWidth=slider.clientWidth;
        //初始化
        let imgs=document.getElementsByClassName('item');
        for(let i=0;i<imgs.length;i++){
            /*imgs[i].style.left=i*sWidth+'px'*/
            imgs[i].style.left=`${i*sWidth}px`;
        }
        //当前显示的图片序号
        let page=0;

        //增加小圆点
        for(let index=0;index<imgs.length-1;index++){
            let div=document.createElement('div');
            slider.appendChild(div);
            div.classList.add('page-control');
            div.style.left=(sWidth/2+index*20)-((imgs.length-1)*10)/2-((imgs.length-2)*10)/2+'px';
        }

        var timer=setInterval(function(){
            computed()
        },3000)

        //增加小箭头
        let leftArrow=document.createElement('div');
        slider.appendChild(leftArrow);
        leftArrow.classList.add('arrow');
        let rightArrow=document.createElement('div');
        slider.appendChild(rightArrow);
        rightArrow.classList.add('arrow','right-arrow');

        //给小箭头增加事件监听
        leftArrow.onclick=function(){
            page ++
            if(page>imgs.length-1){
                page=imgs.length-1
            }
            computed();
            clearTimer(timer);
            timer=setInterval(function(){
                computed()
            },3000)
        }
        rightArrow.onclick=function(){
            page --
            if(page<0){
                page=0
            }
            moveSlider();
            clearInterval(timer);
            timer=setInterval(function(){
                computed()
            },3000)
        }
        //清除老的定时器
        function clearTimer(t){
            clearInterval(t)
        }

        //处理小圆点
        var pageControl=document.querySelectorAll('.page-control');
        for(let index=0;index<pageControl.length;index++){
            //给每一个div增加index属性
            pageControl[index].index=index;
            pageControl[index].onclick=function(e){
                console.log(e.target.index);
                page=e.target.index;
                moveSlider();
            }
        }
        //计算如何切换图片
        function computed(){
            page ++
            if(page>imgs.length-1){
                page=imgs.length-1
            }
            moveSlider();
        }
        // 执行图片的切换
        function moveSlider(){
            for(let i=0;i<imgs.length;i++){
                imgs[i].style.left=`${(i-page)*sWidth}px`;
            }
            //播放到最后一张时，所有图片复位
            if(page==imgs.length-1){
                setTimeout(() => {
                    page=0;
                    //播放到最后一张时，所有图片复位
                    for(let i=0;i<imgs.length;i++){
                        imgs[i].style.transition='none';
                        imgs[i].style.left=`${(i)*sWidth}px`;
                    }
                    setTimeout(function(){
                        for(let i=0;i<imgs.length;i++){
                            imgs[i].style.transition='left 0.7s ease-in-out';
                        } 
                    },100)
                },700)
            }
            setBgColor(page);
        }
        function setBgColor(num){
            for(let index=0;index<pageControl.length;index++){
                pageControl[index].style.backgroundColor='';
                if(num == 4){
                    pageControl[0].style.backgroundColor='#fff';
                }else{
                    pageControl[num].style.backgroundColor='#fff';
                }
            }
        }
        // 小圆点的着色
        setBgColor(0);
    </script>
</body>
</html>